<template>
  <el-main >
    <el-button v-permission="['sys:menuList:add']" type="primary" icon="Plus" size="default" @click="addBtn">新增</el-button>
    <!-- 表格 -->
     <el-table
     style="margin-top: 20px;"
      default-expand-all
      :data="tableList"
      :height="tableheight" 
      row-key="menuId" 
      border stripe>
        <el-table-column label="菜单名称" prop="title"></el-table-column>
        <el-table-column label="图标" prop="icon">
            <template #default="scope">
                <el-icon v-if="scope.row.icon">
                    <component  :is="scope.row.icon"></component>
                </el-icon>
            </template>
        </el-table-column>
        <el-table-column label="类型" prop="type">
            <template #default="scope">
                <el-tag v-if="scope.row.type == '0'" type="danger" size="default">目录</el-tag>
                <el-tag v-if="scope.row.type == '1'" type="success" size="default">菜单</el-tag>
                <el-tag v-if="scope.row.type == '2'" type="primary" size="default">按钮</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="上级菜单" prop="parentName"></el-table-column>
        <el-table-column label="路由名称" prop="name"></el-table-column>
        <el-table-column label="路由地址" prop="path"></el-table-column>
        <el-table-column label="组件路径" prop="url"></el-table-column>
        <el-table-column label="权限字段" prop="code"></el-table-column>
        <el-table-column label="序号" prop="orderNum"></el-table-column>
        <el-table-column label="操作" align="center" width="320px">
            <template #default="scope" >
                <el-button v-permission="['sys:menuList:edit']" type="primary" icon="Edit" size="default" @click="editBtn(scope.row)">编辑</el-button>
                <el-button v-permission="['sys:menuList:delete']" type="danger" icon="Delete" size="default" @click="deleteBtn(scope.row.menuId)">删除</el-button>
            </template>
        </el-table-column>
     </el-table>
     
  
  <SysDialog
  :title="dialog.title"
  :width="dialog.width"
  :height="dialog.height"
  :visible="dialog.visible"
  @on-close="onClose"
  @on-confirm="commit"
  >
    <template v-slot:content>
        <el-form 
        :model="addModel" 
        ref="addForm" 
        :rules="rules" 
        label-width="80px" 
        :inline="false" 
        size="default">
            <el-form-item prop="type" label="菜单类型">
                <el-radio-group v-model="addModel.type">
                    <el-radio  :label="'0'">目录</el-radio>
                    <el-radio  :label="'1'">菜单</el-radio>
                    <el-radio  :label="'2'">按钮</el-radio>
                </el-radio-group>   
            </el-form-item>
            <el-row >
                <el-col :span="12" :offset="0">
                    <el-form-item label="上级菜单" prop="parentId">
                      <el-tree-select
                      @check-change="treeClick"
                      v-model="addModel.parentId"
                      :data="treeList"
                      :render-after-expand="false"
                      show-checkbox
                      check-strictly
                      ></el-tree-select>
                    </el-form-item> 
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="菜单名称" prop="title">
                        <el-input v-model="addModel.title"></el-input>   
                    </el-form-item>   
                </el-col>
            </el-row>
            <el-row v-if="addModel.type !='2'" >
                <el-col :span="12" :offset="0">
                    <el-form-item label="菜单图标" prop="icon">
                      <el-input v-model="addModel.icon"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="路由名称" prop="name">
                      <el-input v-model="addModel.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row >
                <el-col :span="12" :offset="0">
                    <el-form-item label="菜单序号" prop="orderNum">
                      <el-input v-model="addModel.orderNum"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="权限字段" prop="code">
                      <el-input v-model="addModel.code"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row >
                <el-col v-if="addModel.type !='2'" :span="12" :offset="0">
                    <el-form-item label="路由地址" prop="path">
                      <el-input v-model="addModel.path"></el-input>
                    </el-form-item>
                </el-col>
                <el-col v-if="addModel.type =='1'" :span="12" :offset="0">
                    <el-form-item label="组件路径" prop="url">
                      <el-input v-model="addModel.url"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>  
    </template>
  </SysDialog>
</el-main>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue';
import SysDialog from '../../components/SysDialog.vue';
import useDialog from '../../hooks/useDialog';
import { ElMessage, type FormInstance } from 'element-plus';
import {getParentApi,addApi,getListApi,editApi,deleteApi} from '../../api/menu/index.ts'
import { onMounted } from 'vue';
import type {MenuType} from "../../api/menu/MenuModel"
import { nextTick } from 'vue';
import useInstance from '../../hooks/useInstance';
const {global} = useInstance()

const {dialog,onClose,onShow} = useDialog()
//获取上级菜单数据
const treeList = ref([])
const getParent = async() =>{
     let res = await getParentApi()
     if(res && res.code == 200){
        treeList.value = res.data
     }
}
const addModel = reactive({
    menuId:'',
    parentId:'',
    title:'',
    code:'',
    name:'',
    path:'',
    url:'',
    type:'',
    icon:'',
    parentName:'',
    orderNum:''

})
const addForm = ref<FormInstance>()
const treeClick = (item:any) =>{
    console.log(item)
    addModel.parentName = item.title
}
const rules = reactive({
    parentId:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请选择上级菜单"
        }
    ],
    title:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请选择上级菜单"
        }
    ],
    code:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请填写菜单名称"
        }
    ],
    name:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请填写权限字段"
        }
    ],
    path:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请填写路由地址"
        }
    ],
    url:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请填写组件路径"
        }
    ],
    type:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请选择菜单类型"
        }
    ],
    icon:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请填写菜单图标"
        }
    ],
    orderNum:[
        {
            required:true,
            trigger:["blur","change"],
            message:"请填写菜单序号"
        }
    ]
})
const tags = ref('')
const addBtn = () =>{
    addModel.menuId = ''
    tags.value = '0'
    dialog.title = '新增菜单'
    //获取上级菜单
    getParent()
    onShow()
    //清空表单
    addForm.value?.resetFields()
}
//表格高度
const tableheight = ref(0)
//获取表格数据
const tableList = ref([])
const getList = async() =>{
    let res = await getListApi()
    if(res && res.code == 200){
        tableList.value = res.data

    }
}
const editBtn=async(row:MenuType)=>{
    tags.value = '1'
    console.log(row)
    dialog.title = '编辑菜单'
    await getParent()
    //显示弹框
    onShow()
    //回显数据
    nextTick(()=>{
        Object.assign(addModel,row)
    })
    //清空表单
    addForm.value?.resetFields()
    
}
const deleteBtn=async(menuId:string)=>{
    console.log(menuId)
    const confirm = await global.$myconfirm('是否要删除该菜单')
    console.log(confirm)
    if(confirm){
    let res = await deleteApi(menuId)
    if(res && res.code == 200){
        ElMessage.success(res.msg)
        //刷新列表
        getList()
    }
    
  }
}
//表单提交
const commit = async() =>{
    addForm.value?.validate(async(valid)=>{
        if(valid){
            console.log("表单验证通过")
            console.log(addModel)
            let res = null
            if(tags.value == '0'){
                res =await addApi(addModel)
            }else{
                res = await editApi(addModel)
            }
            if(res && res.code == 200){
                ElMessage.success(res.msg)
                getList()
                onClose()
            }

        }
    })
}   
onMounted(()=>{
    getList()
    nextTick(()=>{
        tableheight.value = window.innerHeight - 200
    })
})
</script>

<style lang="scss" scoped>

</style>